import React, { useState, useLayoutEffect } from "react";

const App = () => {
  const [width, setWidth] = useState(100);

  // useLayoutEffect写法是和useEffect一样的，作用也几乎一样
  // useLayoutEffect(() => {
  //   console.log(123);
  // }, []);

  // useLayoutEffect会在react完成DOM更新后马上**同步**调用，会阻塞代码的
  // 执行时机会比useEffect更早

  // 一般情况下官方推荐使用useEffect
  // 如果在useEffect需要去操作dom的元素的样式的变量的时候，应该要使用useLayoutEffect
  // 避免页面的抖动

  useLayoutEffect(() => {
    setWidth(300);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      <div
        style={{ width: width + "px", height: "100px", background: "red" }}
      ></div>
    </>
  );
};

export default App;
